<script setup lang='tsx' name='ChatAsideItem'>
type Props = {
    chatName: string,
    avatar?: string,
    lastMsg?: string,
    badge?: number
    selectd?: boolean
}

const { chatName, avatar = '', lastMsg = '', badge = 0, selectd = false } = defineProps<Props>()

</script>

<template>
    <div class='chat-aside-item-container cursor-pointer' :style="{ backgroundColor: selectd ? '#c9c7c6' : '' }">
        <el-avatar :src="avatar"> {{ avatar ? '' : chatName }} </el-avatar>
        <div class="chat-aside-item-right">
            <div class='chat-name'>{{ chatName }}</div>
            <span class="last-msg">{{ lastMsg }}</span>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.chat-aside-item-container {
    display: flex;
    align-items: center;
    padding-left: 10px;
    height: 60px;
    background-color: #eae8e7;
    gap: 14px;
    user-select: none;
    border-bottom: 0.5px solid #c5c5c5;

    &:hover {
        background-color: #dedbda;
    }

    .chat-aside-item-right {
        height: 42px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .last-msg {
            color: #b8b8b8;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 120px;
        }
    }
}
</style>